import React, { Component } from 'react';
import { Flex, Drawer, List } from 'antd-mobile';
import { NavLink } from 'react-router-dom';
import TouchFeedback from 'rmc-feedback';

import './index.scss';

export default class Header extends Component {
  static defaultProps = {
    menus : [{
      text: '我的',
      icon: 'icon-wode1',
      url: ''
    },{
      text: '预约订单',
      icon: 'icon-yuyuedingdan',
      url: '',
    },{
      text: '订单',
      icon: 'icon-dingdan-80',
      url: ''
    },{
      text: '消息',
      icon: 'icon-xiaoxi',
      url: ''
    }]
  }
  constructor(props){
    super(props);
    this.state = {
      openDrawer : false,
      currentMenu: '',
    }
  }
  handleShowMenu = () => {
    this.setState({openDrawer: !this.state.openDrawer})
  }

  render() {
    // 菜单
    var currentMenu = null;
    const sildbar = (<List >{this.props.menus.map((item,index) => {
      let href_arr = window.location.href.split('/');
      if( `/${href_arr[href_arr.length -1 ]}` === item.url ){
        currentMenu = item.text;
        return;
      }
      return (<TouchFeedback key={index} activeStyle={{background: '#9d9d9d', color: '#99cc00'}}>
        <List.Item onClick={this.handleShowMenu}>
          <NavLink to={item.url}>
            <i className={item.icon}/>&nbsp;&nbsp;&nbsp;{item.text}
          </NavLink>
        </List.Item>
      </TouchFeedback>)
    })}</List>)
    return (
      <div className="header">
        <Flex className="header-flex" justify="between">
          <TouchFeedback activeStyle={{background: '#9d9d9d', color: '#99cc00'}}>
            <div className="left" onClick={this.handleShowMenu}>
                <i className="icon-caidan" ></i>
            </div>
          </TouchFeedback>
          <div className="center">{currentMenu}</div>
          <div className="right"><i className="icon-denglu1"></i></div>
        </Flex>
        <Drawer 
          className="my-drawer"
          enableDragHandle 
          style={{ minHeight: document.documentElement.clientHeight }}         
          sidebar={sildbar} 
          open={this.state.openDrawer}  
          onOpenChange={this.handleShowMenu}>
        &nbsp;
        </Drawer>
      </div>
    )
  }

}

